<template>
  <div class="cart-index">
    <!-- 弹出框 -->
    <van-dialog v-model="show" show-cancel-button :before-close="beforeClose">
      <h3 style="font-size:20px;font-weight:600;text-align:center">编辑商品</h3>
      <div class="inch">
        尺寸：{{productInfo.size}}
        <van-radio-group v-model="size" @change="changeSize">
          <van-radio
            checked
            shape="round"
            v-for="i of productInfo.section"
            :key="i+productInfo.min"
            :value="i+productInfo.min"
            :name="i+productInfo.min"
          >{{i+productInfo.min}}</van-radio>
        </van-radio-group>
      </div>
      <!-- 数量 -->
      <div class="num">
        数量：{{productInfo.num}}
        <van-stepper v-model="num"/>
      </div>
    </van-dialog>

    <!-- 滑动菜单 -->
    <van-swipe-cell
      :right-width="65"
      :left-width="65"
      v-for="item of cartList"
      :key="item.id"
      :on-close="onClose"
    >
      <div class="opt" slot="left" :slot-scope="item">
        <div class="edit" @click="showEditCart(item)">编辑</div>
      </div>
      <div class="opt" slot="right" :slot-scope="item">
        <div class="del" @click="deleteCart(item)">删除</div>
      </div>
      <van-cell-group>
        <!-- 商品卡片 -->
        <van-card
          :num="item.num"
          :tag="'id: '+item.id"
          :price="item.price"
          :desc="item.proName"
          :title="item.proName"
          :thumb="'http://127.0.0.1:3000'+item.pic[0].picAddr"
          :origin-price="item.oldPrice"
        >
          <div slot="tags" :slot-scope="item">
            <van-tag mark type="primary" color="#ffe1e1" text-color="#ad0000">码数：{{item.size}}</van-tag>
            <van-tag mark type="primary" color="#ffe1e1" text-color="#ad0000">数量：{{item.num}}</van-tag>
            <van-tag
              mark
              type="primary"
              color="#ffe1e1"
              text-color="#ad0000"
            >productId: {{item.productId}}</van-tag>
          </div>

          <van-checkbox
            v-model="item.selectState"
            slot="footer"
            :slot-scope="item"
            :name="item.id"
            :ref="item.id"
          ></van-checkbox>
          <!-- <div slot="footer">
            <van-button size="mini">按钮</van-button>
            <van-button size="mini">按钮</van-button>
          </div>-->
        </van-card>
      </van-cell-group>
    </van-swipe-cell>

    <!-- 提交订单 -->
    <van-submit-bar :price="totalPrice*100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="isCheckAll">全选</van-checkbox>
      <span slot="tip">
        你的收货地址不支持同城送,
        <span>修改地址</span>
      </span>
    </van-submit-bar>
  </div>
</template>

<script>
/* eslint-disable */
import { mobile } from "@/api";
export default {
  name: "CartIndex",
  data() {
    return {
      cartList: [],
      // isCheckAll: false, // 是否全选
      // isChecked: true, // 是否选中
      show: false, // 显示弹框
      productInfo: {}, // product数据
      num: 0, // 编辑商品数量
      size: "0" // 编辑商品大小
      // isCheckAll: false
    };
  },
  mounted() {
    this.intiCart();
  },
  computed: {
    totalPrice() {
      let allPrice = 0;
      this.cartList.forEach(item => {
        if (item.selectState) {
          allPrice += item.price * item.num;
        }
      });
      console.log(allPrice);
      return allPrice.toFixed(2);
    },
    isCheckAll: {
      get() {
        // let allCheck = true;
        // this.cartList.forEach(item => {
        //   console.log(item.selectState);
        //   if (item.selectState) {
        //     console.log("0");
        //   } else {
        //     allCheck = false;
        //   }
        // });
        console.log(!this.cartList.filter(v => {
          return !v.selectState;
        }).length);
        
        return !this.cartList.filter(v => {
          return !v.selectState;
        }).length;
      },
      set(value) {
        // let all = this.isCheckAll;
        this.cartList.forEach(item => {
          item.selectState = value;
        });
      }
    }
  },
  methods: {
    // 初始化购物车数据
    intiCart() {
      mobile
        .queryCart()
        .then(res => {
          this.cartList = res.data;
          // this.cartList.map(item => {
          //   item.selectState = false
          // })
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 提交订单
    onSubmit() {
      this.$router.push('demo')
    },
    // 关闭滑动菜单
    onClose(clickPosition, instance) {
      switch (clickPosition) {
        case "left":
          instance.close();
          break;
        case "cell":
        case "outside":
          instance.close();
          break;
        case "right":
          instance.close();
          break;
      }
    },
    // 编辑购物车
    showEditCart(item) {
      // 保存当前商品
      this.productInfo = item;
      let arr = item.productSize.split("-");
      let min = parseInt(arr[0]);
      let max = parseInt(arr[1]);
      let section = max - min;
      this.productInfo.min = min;
      this.productInfo.max = max;
      this.productInfo.section = section;
      // 当前尺寸数量
      this.size = item.size;
      this.num = item.num;
      console.log(item);
      // console.log(this.size, this.num)
      // 显示弹框
      this.$nextTick(() => {
        this.show = true;
      });
    },
    // 删除购物车
    deleteCart(item) {
      console.log(item);
      let obj = { id: [item.id] };
      this.$dialog
        .confirm({
          message: "确定删除吗？"
        })
        .then(() => {
          mobile
            .delCart(obj)
            .then(res => {
              console.log(res);
              if (res.data.success) {
                this.intiCart();
                this.$toast.success("删除商品成功");
              } else {
                this.$toast.fail("操作失败");
              }
            })
            .catch(err => {
              console.log(err);
            });
        });
    },
    // 弹框关闭之前
    beforeClose(action, done) {
      // 确认
      if (action === "confirm") {
        console.log(this.productInfo.id, this.size, this.num);
        let obj = {
          id: this.productInfo.id,
          size: this.size,
          num: this.num
        };
        // 请求更新
        mobile
          .editCart(obj)
          .then(res => {
            console.log(res);
            if (res.data.success) {
              this.intiCart();
              this.$toast.success("更新商品成功");
            } else {
              this.$toast.fail("更新失败，请重试");
            }
          })
          .catch(err => {
            console.log(err);
          });
        // 关闭弹框
        done();
      } else {
        done();
      }
    },
    // 修改商品大小
    changeSize(name) {
      console.log(name);
    },
    // 选择商品
    // handleToggleCheck(item) {
    //   console.table(this.cartList);
    //   // item.selectState = !item.selectState
    // },
    // // 选择全部商品
    // ToggleCheckAll() {
    //   let all = this.isCheckAll;
    //   this.cartList.map(item => {
    //     item.selectState = all;
    //   });
    // }
  }
};
</script>

<style lang="scss">
.van-swipe-cell {
  .opt {
    color: #fff;
    width: 65px;
    div {
      height: 123px;
      line-height: 123px;
      text-align: center;
    }
    .edit {
      background-color: #006699;
    }
    .del {
      background-color: #f44;
    }
  }
}
</style>

<style lang="scss" scoped>
.cart-index {
  padding-top: 46px;
  padding-bottom: 88px;
  .van-dialog {
    padding: 10px 20px;
    .inch {
      .van-radio-group {
        text-align: center;
        .van-radio {
          padding: 0 5px;
          display: inline-block;
          background-color: #f8f8f8;
        }
      }
    }
  }
  .van-swipe-cell {
    border-bottom: 1px solid #f1f1f1;
    .van-cell-group {
      .van-radio-group {
        .van-radio {
          display: inline-block;
        }
      }
      .van-card {
      }
    }
    .van-tag {
      margin-right: 10px;
    }
  }
  .van-card:not(:first-child) {
    margin-top: 0;
  }
  .van-submit-bar {
    .van-checkbox {
      padding-left: 10px;
    }
  }
}
</style>
